<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏和内容框示例</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        /* 导航栏样式 */
        .navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: #333;
            padding: 10px 20px;
            color: white;
        }

        .navbar .logo img {
            height: 40px;
        }

        .navbar .system-name {
            flex: 1;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }

        .navbar .titles a {
            text-decoration: none;
            color: white;
            font-weight: bold;
        }

        .navbar .titles a:hover {
            text-decoration: underline;
        }

        /* 页面布局 */
        .main-container {
            display: flex;
            height: calc(100vh - 60px); /* 除去导航栏的高度 */
        }

        /* 左侧垂直菜单样式 */
        .sidebar {
            width: 200px;
            border-right: 1px solid #ccc;
            background-color: #f9f9f9;
            padding: 10px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        .menu-item {
            position: relative;
            cursor: pointer;
            padding: 10px;
            border-bottom: 1px solid #eee;
        }

        .menu-item:hover {
            background-color: #e0e0e0;
        }

        .menu-item:hover::after {
            content: attr(data-tooltip);
            position: absolute;
            left: 100%;
            top: 50%;
            transform: translateY(-50%);
            background-color: #333;
            color: white;
            padding: 5px 10px;
            border-radius: 4px;
            white-space: nowrap;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .submenu {
            display: none;
            background-color: #fff;
            padding-left: 20px;
            margin-top: 5px;
            border-left: 2px solid #ccc;
        }

        .submenu a {
            display: block;
            padding: 5px 0;
            color: #333;
            text-decoration: none;
        }

        .submenu a:hover {
            text-decoration: underline;
        }

        .menu-item.active .submenu {
            display: block;
        }

        /* 右侧内容框样式 */
        .content {
            flex: 1;
            padding: 20px;
            background-color: #fff;
            overflow-y: auto;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .content h1 {
            margin-top: 0;
        }

        /* 表单样式 */
        .form-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .form-container h1 {
            text-align: center;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-group input, .form-group select, .form-group textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .form-group textarea {
            resize: vertical;
        }

        .form-actions {
            text-align: center;
            margin-top: 20px;
        }

        .form-actions button {
            padding: 10px 20px;
            font-size: 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .form-actions .btn-submit {
            background-color: #4CAF50;
            color: white;
        }

        .form-actions .btn-reset {
            background-color: #f44336;
            color: white;
            margin-left: 10px;
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="navbar">
    <div class="logo">
        <img src="/image/校徽.png" alt="图标">
    </div>
    <div class="system-name">人力资源管理系统</div>
    <div class="titles">
        <a href="index_jingli.jsp.jsp">首页</a>
        <a href="#about">关于</a>
        <a href="#contact">联系我们</a>
    </div>
</div>


<!-- 页面主体布局 -->
<div class="main-container">
    <!-- 左侧垂直菜单 -->
    <div class="sidebar">
        <div class="menu-item" data-tooltip="人力资源管理模块">
            人力资源管理模块
            <div class="submenu">
                <a href="humanAdd.jsp">添加档案</a>
                <a href="humanQuery">档案查询和管理</a>
            </div>
        </div>
        <div class="menu-item" data-tooltip="管理薪酬">
            薪酬管理模块
        </div>
    </div>

    <!-- 右侧内容框 -->
    <div class="content">
        <div class="form-container">
            <h1>录入档案信息</h1>
            <form id="archiveForm">


                <!-- 修改后的表单部分 -->
                <div class="form-group">
                    <label for="departmentLevel3Id">三级部门 *</label>
                    <select id="departmentLevel3Id" name="departmentLevel3Id" required>
                        <option value="">请选择三级部门</option>
                        <!-- 动态生成的选项将插入到这里 -->
                    </select>
                </div>

                <!-- 二级部门 -->
                <div class="form-group">
                    <label for="departmentLevel2Id" id="departmentLevel2Label">二级部门 *</label>
                    <!-- 用来显示部门名称的输入框 -->
                    <input type="text" id="departmentLevel2Name" name="departmentLevel2Name" readonly>
                    <!-- 隐藏字段存储部门ID -->
                    <input type="hidden" id="departmentLevel2Id" name="departmentLevel2Id">
                </div>

                <!-- 一级部门 -->
                <div class="form-group">
                    <label for="departmentLevel1Id" id="departmentLevel1Label">一级部门 *</label>
                    <!-- 用来显示部门名称的输入框 -->
                    <input type="text" id="departmentLevel1Name" name="departmentLevel1Name" required readonly>
                    <!-- 隐藏字段存储部门ID -->
                    <input type="hidden" id="departmentLevel1Id" name="departmentLevel1Id" required>
                </div>

                <!-- 部门名称 -->
                <div class="form-group">
                    <label for="departmentName">所属部门 *</label>
                    <input type="text" id="departmentName" name="departmentName" required>
                </div>


                <!-- 姓名 -->
                <div class="form-group">
                    <label for="name">姓名 *</label>
                    <input type="text" id="name" name="name" required>
                </div>

                <!-- 性别 -->
                <div class="form-group">
                    <label for="gender">性别 *</label>
                    <select id="gender" name="gender" required>
                        <option value="">请选择</option>
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>

                <!-- 年龄 -->
                <div class="form-group">
                    <label for="age">年龄 *</label>
                    <input type="number" id="age" name="age" min="1" max="99" required>
                </div>

                <!-- 电话 -->
                <div class="form-group">
                    <label for="phone">电话</label>
                    <input type="text" id="phone" name="phone">
                </div>

                <!-- 身份证号码 -->
                <div class="form-group">
                    <label for="idCard">身份证号码 *</label>
                    <input type="text" id="idCard" name="idCard" maxlength="18" required>
                </div>

                <!-- 薪酬标准 -->
                <div class="form-group">
                    <label for="salary">薪酬标准 *</label>
                    <input type="number" id="salary" name="salary" step="0.01" required>
                </div>


                <!-- 开户银行 -->
                <div class="form-group">
                    <label for="bankName">开户银行 *</label>
                    <select id="bankName" name="bankName" required>
                        <option value="">请选择银行</option>
                        <option value="中国工商银行">中国工商银行</option>
                        <option value="中国建设银行">中国建设银行</option>
                        <option value="中国银行">中国银行</option>
                        <option value="中国农业银行">中国农业银行</option>
                        <option value="交通银行">交通银行</option>
                        <option value="招商银行">招商银行</option>
                        <option value="兴业银行">兴业银行</option>
                    </select>
                </div>


                <!-- 银行账号 -->
                <div class="form-group">
                    <label for="bankAccount">银行账号 *</label>
                    <input type="text" id="bankAccount" name="bankAccount" required>
                </div>

                <!-- 个人介绍 -->
                <div class="form-group">
                    <label for="personalDescription">个人介绍</label>
                    <textarea id="personalDescription" name="personalDescription" rows="4"></textarea>
                </div>

                <!-- 备注 -->
                <div class="form-group">
                    <label for="remarks">备注</label>
                    <textarea id="remarks" name="remarks" rows="4"></textarea>
                </div>

                <!-- 档案编号 -->
                <%--                <div class="form-group">--%>
                <%--                    <label for="archiveCode">档案编号 *</label>--%>
                <%--                    <input type="text" id="archiveCode" name="archiveCode" required>--%>
                <%--                </div>--%>

                <!-- 提交按钮 -->
                <div class="form-actions">
                    <button type="button" id="submitBtn" class="btn-submit">提交</button>
                    <button type="reset" class="btn-reset">重置</button>
                </div>

            </form>
        </div>
    </div>
</div>

<script>
    // 页面加载时获取三级部门数据
    window.onload = function () {
        fetch('/department', {
            method: 'GET'
        })
            .then(response => response.json())
            .then(data => {
                if (data.code === 1) {
                    // 将返回的数据存储到全局变量中
                    departmentList = data.data;

                    // 填充三级部门下拉框
                    const selectElement = document.getElementById('departmentLevel3Id');
                    departmentList.forEach(department => {
                        const option = document.createElement('option');
                        option.value = department.department_id; // 设置选项值为部门ID
                        option.textContent = department.department_name; // 显示部门名称
                        selectElement.appendChild(option);
                    });
                } else {
                    alert(`获取三级部门数据失败：${data.msg}`);
                }
            })
            .catch(error => {
                console.error('获取三级部门数据出错：', error);
                alert('无法加载三级部门信息，请稍后重试');
            });
    };

    // 监听三级部门选择变化
    document.getElementById('departmentLevel3Id').addEventListener('change', function () {
        const selectedLevel3Id = this.value;
        const selectedLevel3Department = departmentList.find(department => department.department_id == selectedLevel3Id);

        if (selectedLevel3Id) {
            // 创建一个 Department 对象来封装三级部门信息
            const departmentData = {
                level: 3, // 查询三级部门
                parent_id: selectedLevel3Department ? selectedLevel3Department.parent_id : null // 上级部门ID
            };

// 访问/department/level2接口查询二级部门
            fetch('/department/level2', {
                method: 'POST',
                body: JSON.stringify(departmentData), // 将三级部门信息传递给后台
                headers: {
                    'Content-Type': 'application/json' // 设置内容类型为JSON
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 1 && data.data) {
                        const level2Department = data.data;
                        // 显示二级部门名称
                        document.getElementById('departmentLevel2Name').value = level2Department.department_name; // 填充部门名称
                        // 将部门ID填充到隐藏字段
                        document.getElementById('departmentLevel2Id').value = level2Department.department_id; // 填充部门ID
                        // 更新label显示部门名称
                        document.getElementById('departmentLevel2Label').textContent = `二级部门: ${level2Department.department_name}`;
                    } else {
                        alert(`查询二级部门失败：${data.msg}`);
                    }
                })
                .catch(error => {
                    console.error('查询二级部门出错：', error);
                    alert('查询二级部门出错，请稍后重试');
                });

// 访问/department/level3接口查询一级部门
            fetch('/department/level3', {
                method: 'POST',
                body: JSON.stringify(departmentData), // 将三级部门信息传递给后台
                headers: {
                    'Content-Type': 'application/json' // 设置内容类型为JSON
                }
            })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 1 && data.data) {
                        const level1Department = data.data;
                        // 显示一级部门名称
                        document.getElementById('departmentLevel1Name').value = level1Department.department_name; // 填充部门名称
                        // 将部门ID填充到隐藏字段
                        document.getElementById('departmentLevel1Id').value = level1Department.department_id; // 填充部门ID
                        // 更新label显示部门名称
                        document.getElementById('departmentLevel1Label').textContent = `一级部门: ${level1Department.department_name}`;
                    } else {
                        alert(`查询一级部门失败：${data.msg}`);
                    }
                })
                .catch(error => {
                    console.error('查询一级部门出错：', error);
                    alert('查询一级部门出错，请稍后重试');
                });
        }
    });


    // 监听提交按钮点击事件
    document.getElementById('submitBtn').addEventListener('click', function () {
        const form = document.getElementById('archiveForm');

        // 创建表单数据对象
        const formData = new FormData(form);

        // 将表单数据转换为JSON对象
        const formObject = {};
        formData.forEach((value, key) => {
            formObject[key] = value;
        });

        // 获取当前选择的三级部门ID，二级部门和一级部门ID
        formObject.departmentLevel3Id = document.getElementById('departmentLevel3Id').value;
        formObject.departmentLevel2Id = document.getElementById('departmentLevel2Id').value;
        formObject.departmentLevel1Id = document.getElementById('departmentLevel1Id').value;

        // 可选：表单验证（简单检查）
        if (!formObject.departmentLevel3Id || !formObject.departmentLevel2Id || !formObject.departmentLevel1Id) {
            alert('请确保选择了所有部门信息');
            return;
        }

        // 使用 fetch 发送 POST 请求
        fetch('/human', {
            method: 'POST',
            body: JSON.stringify(formObject), // 将表单数据作为 JSON 发送
            headers: {
                'Content-Type': 'application/json' // 设置请求头
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error(`服务器错误: ${response.status}`);
                }
                return response.json();
            })
            .then(data => {
                if (data.code === 1) {
                    alert('档案录入成功');
                    form.reset(); // 重置表单
                } else {
                    alert(`提交失败：${data.msg}`);
                }
            })
            .catch(error => {
                console.error('提交失败:', error);
                alert('提交档案信息出错，请稍后重试');
            });
    });


    // JavaScript 实现下拉菜单功能
    document.querySelectorAll('.menu-item').forEach(item => {
        item.addEventListener('click', () => {
            // 切换 active 类，控制子菜单显示/隐藏
            item.classList.toggle('active');
        });
    });



</script>


</body>
</html>